<script setup>
import authApi from '@/api/auth';
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';

const router = useRouter();
const waiting = true;
const waitingPromptText = ref('登录成功，正在将店铺绑定至系统...');

const spinnerIcon = {
  loading: '<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#409eff" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path></svg>',
  success: '<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#409eff" d="M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"></path></svg>'
}
const currentSpinner = ref(spinnerIcon.loading);

onMounted(() => {
  console.log(router.currentRoute.value.query.state);

  authApi.authoriseShop({ code: router.currentRoute.value.query.code }).then((res) => {
    console.log(res);
    waitingPromptText.value = '授权成功...即将跳转系统首页';
    currentSpinner.value = spinnerIcon.success;
    setTimeout(() => {
      router.push('/shop-auth');
    }, 3000);
  }).catch(err => {
    console.warn(err);
  });
});
</script>

<template>
  <div
    class="authorise-shop-success-view"
    v-loading="waiting"
    :element-loading-text="waitingPromptText"
    :element-loading-spinner="currentSpinner"
  >
  </div>
</template>


<style scoped>
.authorise-shop-success-view {
  width: 100%;
  height: 100vh;
}

.el-loading-spinner i {
  width: 30px;
  height: 30px;
  margin: 10px;
}
</style>
